<template>
  <dv-border-box-1 style="height:630px">
    <div id="border">
      <!-- 表单 -->
      <el-form
        :inline="true"
        width="100%"
        :model="searchMap"
        class="demo-form-inline"
      >
        <el-form-item>
          <el-input v-model="searchMap.tagname" placeholder="标签名"></el-input>
        </el-form-item>
        <el-form-item label="标签状态" prop="state">
          <el-tooltip
            :content="searchMap.state === '1' ? '可使用' : '全部标签'"
            placement="top"
          >
            <el-switch
              v-model="searchMap.state"
              active-color="#13ce66"
              inactive-color="grey"
              active-value="1"
              inactive-value="0"
              @change="handleSearchStateChange"
            ></el-switch>
          </el-tooltip>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="fetchData"
            >查询</el-button
          >
        </el-form-item>
        <el-button
          style="float:right"
          icon="el-icon-plus"
          type="primary"
          circle
          @click="handleAdd"
        ></el-button>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="!isTagDialog ? 17 : 24">
          <div>
            <!-- Table -->
            <el-table
              highlight-current-row
              @current-change="clickCurrentChange"
              :data="list"
              style="width: 100%"
              height="460"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                v-if="!isTagDialog"
                prop="id"
                label="标签编号"
                width="150"
              ></el-table-column>
              <el-table-column
                prop="tagname"
                label="标签名"
                :width="!isTagDialog ? '120px' : '180px'"
              ></el-table-column>
                <el-table-column
                v-if="!isTagDialog"
                prop="times"
                label="使用次数"
                width="150"
              ></el-table-column>
              <el-table-column
                prop="state"
                label="状态"
                :width="!isTagDialog ? '120px' : '150px'"
              >
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state === '1' ? '' : 'info'">{{
                    scope.row.state | stateFilter
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                v-if="!isTagDialog"
                label="操作"
                fixed="right"
                width="250px"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit"
                    circle
                    @click="handleEdit(scope.row.id)"
                  ></el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="handleDelete(scope.row.id)"
                  ></el-button>
                  <el-button
                    size="mini"
                    type="warning"
                    icon="el-icon-notebook-2"
                    plain
                    @click="handleArticle(scope.row.id)"
                    >文章列表</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-divider></el-divider>
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              :layout="
                !isTagDialog
                  ? 'total, sizes, prev, pager, next, jumper'
                  : 'total,pager,prev,next'
              "
              :total="total"
            ></el-pagination>
          </div>
        </el-col>
        <el-col :span="7" v-if="!isTagDialog">
          <!-- 图片 -->

          <!-- 卡片 -->
          <el-card :body-style="{ padding: '0px' }" style="height:500px">
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 编辑标签Dialog -->
      <el-dialog
        title="编辑标签"
        :visible.sync="dialogFormVisible"
        width="400px"
      >
        <el-form
          :model="pojo"
          ref="pojoForm"
          :rules="rules"
          label-position="right"
          label-width="80px"
          size="mini"
        >
          <el-form-item label="标签名称" prop="tagname">
            <el-input
              width="60px"
              v-model="pojo.tagname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否使用" prop="state">
            <el-tooltip
              :content="pojo.state === '1' ? '使用' : '不使用'"
              placement="top"
            >
              <el-switch
                v-model="pojo.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleStateChange"
              ></el-switch>
            </el-tooltip>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              pojo.id === null ? addData('pojoForm') : updateData('pojoForm')
            "
            >{{ this.pojo.id === null ? "添加" : "修改" }}</el-button
          >
        </div>
      </el-dialog>
    </div>
  </dv-border-box-1>
</template>
<script>
import tagApi from "@/api/tag";
const stateTypeOptions = [
  { type: "0", name: "已弃用" },
  { type: "1", name: "使用中" }
];
export default {
  props: {
    isTagDialog: Boolean
  },
  data() {
    return {
      currentDate: new Date(),
      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchMap: {
        tagname: "",
        state: ""
      },
      dialogFormVisible: false, //控制dialog显示
      rules: {
        tagname: [
          { required: true, message: "标签名称不能为空", trigger: "blur" }
        ]
      },
      pojo: {
        id: null,
        tagname: "",
        state: ""
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      tagApi
        .searchPage(this.currentPage, this.pageSize, this.searchMap)
        .then(resp => {
          const respData = resp.data;
          if (respData.flag) {
            this.list = respData.data.rows;
            this.total = respData.data.total;
          } else {
            this.$message({
              message: respData.message,
              type: "warning"
            });
          }
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    /**
     * 打开编辑标签窗口
     */
    handleAdd() {
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["pojoForm"].resetFields();
      });
    },
    /**
     * 添加标签
     */
    addData(formName) {
      this.$refs.pojoForm.validate(valid => {
        if (valid) {
          tagApi.addTag(this.pojo).then(resp => {
            const respData = resp.data;
            if (respData.flag) {
              this.$message({
                message: respData.message,
                type: "success"
              });
              this.fetchData();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: respData.message,
                type: "warning"
              });
            }
          });
        } else {
          this.$message({
            message: "标签不能为空",
            type: "warning"
          });
        }
      });
    },
    /**
     * 打开编辑标签窗口
     */
    handleEdit(id) {
      this.handleAdd();
      tagApi.getTagById(id).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.pojo = respData.data;
        } else {
          this.$message({
            message: respData.message,
            type: "error"
          });
        }
      });
    },
    /**
     * 更新标签
     */
    updateData(formName) {
      this.$refs.pojoForm.validate(valid => {
        if (valid) {
          //提交更新
          tagApi.updateTag(this.pojo).then(resp => {
            const respData = resp.data;
            if (respData.flag) {
              this.$message({
                message: respData.message,
                type: "success"
              });
              this.fetchData();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: respData.message,
                type: "warning"
              });
            }
          });
        } else {
          this.$message({
            message: "标签不能为空",
            type: "warning"
          });
        }
      });
    },
    /**
     * 删除标签
     */
    handleDelete(id) {
      this.$confirm("确定弃用此标签吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          tagApi.deleteById(id).then(resp => {
            this.$message({
              type: resp.data.flag ? "success" : "error",
              message: "删除成功!"
            });
            if (resp.data.flag) {
              this.fetchData();
            }
          });
        })
        .catch(() => {
          return;
        });
    },
    /**
     * 打开文章列表
     */
    handleArticle(id) {},
    handleStateChange(val) {
      this.pojo.state = val;
    },
    handleSearchStateChange(val) {
      this.searchMap.state = val;
    },
    /**
     * 点击某行后触发该方法
     */
    clickCurrentChange(currentRow) {
      //点击后将数据传递到父组件（文章管理），触发父组件的option-category，父组件可以在option-category这个事件对应的处理函数中接收数据
      this.$emit("option-tag", currentRow);
    }
  },
  filters: {
    stateFilter(type) {
      const stateobj = stateTypeOptions.find(obj => {
        return obj.type === type;
      });
      return stateobj ? stateobj.name : null;
    }
  }
};
</script>
<style scoped>
#border {
  padding: 20px;
}
/* 图片 */
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
